<template>
  <div class="wrapper">
    <ul>
      <li class="alertLevel-wrapper">
        <div id="alertLevel" class="echart"></div>
      </li>
      <li class="sendAddress-wrapper">
        <div id="sendAddress" class="echart"></div>
      </li>
    </ul>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  name: "Statistics",
  data() {
    return {
      alertLevel: "",
      sendAddress: "",
      alertLevelData: "",
      sendAddressData: ""
    };
  },
  methods: {
    initAlertLevel() {
      this.alertLevel.setOption({
        title: {
          text: "受伤程度人数占比",
          textStyle: {
            color: "#996699"
          }
        },
        legend: {
          type: "plain",
          orient: "vertical",
          right: 0
        },
        grid: {},
        series: [
          {
            name: "受伤程度人数占比",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["50%", "60%"],
            roseType: "angle",
            label: {
              show: true,
              formatter: "{c}人\n{d}%"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      });
    },
    initSendAdd() {
      this.sendAddress.setOption({
        title: {
          text: "送往地点人数",
          textStyle: {
            color: "#996699"
          }
        },
        grid: {
          left: "15%"
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
          //data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#996699"
              }
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: "category",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                color: "#99CC66",
                fontSize: "12",
                fontFamily: "PingFangSC-Regular"
              },
              formatter: function(val) {
                //console.log(val);
                return `${val}人`;
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        visualMap: [
          {
            type: "continuous",
            calculable: true,
            dimension: 0
          }
        ],
        series: [
          {
            type: "bar",
            name: "送往地点人数",
            barWidth: `30%`,
            label: {
              color: "#99CC66",
              show: true,
              position: [0, "-100%"],
              textStyle: {
                fontSize: 12
              },
              formatter: function(a, b) {
                return a.name;
              }
            }
          }
        ]
      });
    },
    SetAlertLevelData(val) {
      let aldata = val.map(item => {
        let obj = null;
        switch (item.name) {
          case "黄色预警":
            obj = { ...item, itemStyle: { color: "#ea9b4f" } };
            break;
          case "红色预警":
            obj = { ...item, itemStyle: { color: "#e15777" } };
            break;
          case "黑色预警":
            obj = { ...item, itemStyle: { color: "#777" } };
            break;
          case "绿色预警":
            obj = { ...item, itemStyle: { color: "#95ea71" } };
            break;
        }
        return obj;
      });
      this.alertLevel.setOption({
        series: [
          {
            // 根据名字对应到相应的系列
            name: "受伤程度人数占比",
            data: aldata
          }
        ]
      });
    },
    SetSendAddData(val) {
      //debugger;
      let data = val.map(item => item.value);
      //let min = Math.min(...data);
      let max = Math.max(...data) == -Infinity ? 0 : Math.max(...data);
      //console.log(val);
      this.sendAddress.setOption({
        yAxis: [
          {
            data: val.map(item => item.name)
          },
          {
            data: data
          }
        ],
        visualMap: [
          {
            min: 0,
            max: max
          }
        ],
        series: [
          {
            // 根据名字对应到相应的系列
            name: "送往地点人数",
            data: val
          }
        ]
      });
    }
  },
  mounted() {
    this.alertLevel = echarts.init(document.querySelector("#alertLevel"));
    this.initAlertLevel();
    this.sendAddress = echarts.init(document.querySelector("#sendAddress"));
    this.initSendAdd();
    let alertLevelData = this.$store.state.alertLevelData;
    if (alertLevelData != "") {
      //console.log(1,alertLevelData);
      this.SetAlertLevelData(alertLevelData);
    }
    let sendAddData = this.$store.state.sendAddData;
    if (sendAddData != "") {
      this.SetSendAddData(sendAddData);
    }
  },
  watch: {
    "$store.state.alertLevelData": {
      handler(val) {
        //console.log(2,val);
        this.SetAlertLevelData(val);
      },
      deep: true
      // immediate: true
    },
    "$store.state.sendAddData": {
      handler(val) {
        this.SetSendAddData(val);
      },
      deep: true
      // immediate: true
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
  height: 100%;
}
ul {
  height: 100%;
  display: flex;
  flex-direction: column;
}
li {
  border: 1px solid #99cccc;
 
}
.alertLevel-wrapper {
  flex-grow: 1;
  position: relative;
}
.sendAddress-wrapper {
  flex-grow: 1.5;
    position: relative;
}
.echart {
 position: absolute;
 top: 0;
 bottom: 0;
 width:100%;
}
.wrapper >>> .echart > div {
  height: 100% !important;
}
</style>
